<template>
  <div>
    <header class="head-content">
      <div class="head-logo">
        <a href="#"><img src="../assets/img/logo.png" alt=""/></a>
      </div>
      <div class="head-center">
        <ul>
          <nuxt-link :to="{path: '/'}"><span>首页</span></nuxt-link>
          <nuxt-link :to="{name: 'course'}"><span>课程</span></nuxt-link>
          <nuxt-link to=""><span>名师</span></nuxt-link>
          <nuxt-link to=""><span>考试</span></nuxt-link>
          <nuxt-link to=""><span>博客</span></nuxt-link>
        </ul>
      </div>
      <div class="head-search">
        <el-input type="text" v-model="searchContent" placeholder="输入你想要学的课程" suffix-icon="el-icon-search"></el-input>
      </div>
      <div class="head-right">
        <ul>
          <li>
            <nuxt-link to="">登录</nuxt-link><span>&nbsp;</span>
          </li>
          <li>
            <nuxt-link to="">注册</nuxt-link>
          </li>
        </ul>
      </div>
    </header>

    <nuxt/>

    <footer class="foot-content">
      <div class="foot-left">
        <h1>XiYun</h1>
      </div>
      <div class="foot-right">
        <table>
          <tbody>
            <tr>
              <th>相关产品</th>
              <th>联系我们</th>
              <th>社区服务</th>
              <th>商业合作</th>
            </tr>
            <tr>
              <td>Feather</td>
              <td>Feather</td>
              <td>Feather</td>
              <td>Feather</td>
            </tr>
            <tr>
              <td>Feather</td>
              <td>Feather</td>
              <td>Feather</td>
              <td>Feather</td>
            </tr>
            <tr>
              <td>Feather</td>
              <td>Feather</td>
            </tr>
          </tbody>
        </table>
      </div>
    </footer>
  </div>
</template>

<script>

  export default {
    name: "default",
    data() {
      return {
        value: true,
        searchContent: '',
      }
    }
  }
</script>

<style scoped>
  @import "assets/css/global.css";

  .head-content{
    width: 1300px;
    margin: auto;
    display: flex;
  }
  .head-logo{
    float: left;
    flex: 1;
  }
  .head-center{
    display: flex;
    line-height: 72px;
    flex: 2.5;
  }
  .head-search{
    margin-top: 36px;
  }
  .head-right{
    margin-top: 36px;
  }
  .head-right li{
    float: left;
    width: 40px;
    list-style: none;
    line-height: 10px;
  }
  .head-center a{
    font-size: 24px;
    font-family: 幼圆,serif;
    color: #47494e;
    padding: 15px;
  }
  .head-center a:hover{
    color: orange;
  }
  .head-center span:hover{
    border-bottom: solid 2px orangered;
  }
  .foot-content{
    background: dimgray;
    color: floralwhite;
    height: 280px;
    margin-top: 64px;
  }
  .foot-left{
    width: 400px;
  }
  .foot-right{
    width: 600px;
    float: right;
  }
  .foot-right td th{
    padding: 5px;
  }
  .foot-right td,.foot-right tr{
    padding: 2px 8px;
  }
</style>
